<template>
  <view v-if="goods_info.goods_name" class="info-box">
    <!-- 轮播图 -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
      indicator-active-color="#fff"
    >
      <swiper-item v-for="(item, index) in goods_info.pics" :key="index">
        <image :src="item.pics_big" @click="preview(index)"></image>
      </swiper-item>
    </swiper>
    <!-- 详情 -->
    <view class="goods-info-box">
      <!-- 商品价格 -->
      <view class="goods-info-price">¥ {{ goods_info.goods_price }}</view>
      <!-- 商品信息 -->
      <view class="goods-info">
        <view class="goods-name">{{ goods_info.goods_name }}</view>
        <view class="goods-icon">
          <uni-icons class="goods-icon-star" type="star" size="24"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <!-- 运费 -->
      <view class="goods-freight">快递：免运费</view>
    </view>
    <!-- 详情图 -->
    <rich-text :nodes="goods_info.goods_introduce"></rich-text>
    <!-- 详情图 -->

    <!-- 商品导航 -->
    <uni-goods-nav
      class="goods-nav"
      :fill="true"
      :options="options"
      :button-group="customButtonGroup"
      @click="onClick"
      @buttonClick="buttonClick"
    />
    <!-- 商品导航 -->
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {
      goods_info: {}, //商品信息
      options: [
        //导航信息
        {
          icon: 'chat',
          text: '客服'
        },
        {
          icon: 'shop',
          text: '店铺',
          infoBackgroundColor: '#007aff',
          infoColor: '#f5f5f5'
        },
        {
          icon: 'cart',
          text: '购物车',
          info: 0
        }
      ],
      customButtonGroup: [
        {
          text: '加入购物车',
          backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }
      ]
    }
  },
  onLoad(options) {
    const goods_id = options.goods_id
    //获取商品详情
    this.getGoodsInfo(goods_id)
  },
  methods: {
    async getGoodsInfo(goods_id) {
      const { data } = await uni.$http.get('/api/public/v1/goods/detail', {
        goods_id
      })
      //请求失败
      if (data.meta.status !== 200) return uni.$errShowMes()
      data.message.goods_introduce = data.message.goods_introduce.replace(
        /<img/g,
        '<img style ="display:block;"'
      )
      this.goods_info = data.message
    },
    //预览
    preview(index) {
      uni.previewImage({
        current: index,
        urls: this.goods_info.pics.map(x => x.pics_big),
        loop: true
      })
    },
    onClick(e) {
      if (e.content.text == '客服') {
        // 客服聊天
      }
      if (e.content.text == '店铺') {
        // 店铺详情
      }
      if (e.content.text == '购物车') {
        // 购物车页面
        uni.switchTab({
          url: '/pages/cart/cart'
        })
      }
      // uni.showToast({
      //   title: `点击${e.content.text}`,
      //   icon: 'none'
      // })
    },
    buttonClick(e) {
      if (e.content.text == '加入购物车') {
        // 加入购物车事件
        const goods = {
          goods_id: this.goods_info.goods_id, // 商品的Id
          goods_name: this.goods_info.goods_name, // 商品的名称
          goods_price: this.goods_info.goods_price, // 商品的价格
          goods_count: 1, // 商品的数量
          goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
          goods_state: true // 商品的勾选状态
        }
        this.addTheGoods(goods)
      }
      if (e.content.text == '立即购买') {
        // 购买事件
      }
    },
    ...mapMutations('cart', {
      addTheGoods: 'addTheGoods'
    })
  },
  computed: {
    ...mapState('cart', {
      cart: 'cart'
    }),
    ...mapGetters('cart', {
      total: 'total'
    })
  },
  watch: {
    total: {
      handler(newVal) {
        const result = this.options.find(item => item.text === '购物车')
        if (result) {
          result.info = newVal
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.info-box {
  padding-bottom: 50px;
}
swiper {
  height: 700rpx;

  image {
    height: 100%;
    width: 100%;
  }
}

.goods-info-box {
  .goods-info-price {
    color: red;
    font-size: 16px;
    padding: 5px 10px;
  }

  .goods-info {
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;

    .goods-name {
      font-size: 14px;
    }

    .goods-icon {
      padding: 0px 7px;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-left: 1px solid #d4d4d4;
      margin-left: 30rpx;
    }
  }

  .goods-freight {
    padding: 5px;
    font-size: 12px;
    color: #6d6d6d;
  }
}
.goods-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
